<!DOCTYPE html>
<html>
<head>
<title>万八千后台管理</title>
<meta charset="utf-8"/>
 <meta name="keywords" content="贷款，信用贷，分期，借款，万八千，信用借款，借款5000元，小额现金贷" />
  <meta name="description" content="万八千提供快速的小额借款服务。可以借款5000元、无抵押、无担保、万八千是一款针对成人白领市场的消费金融产品，通过互联网、大数据等科技手段，为用户提供短期的信用借贷，解决用户资金周转问题。"/>
<link href="css/style.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="css/a_index.css"/>
<script src="js/jqbase.js"></script>
</head>
<body style="background:#eaedf1;">
<style>
	.right-container {
		position: absolute;
		right: 0;
		width: calc(100% - 200px);
		transition: all .5s;
	}

	.showMenu .right-container {
		width: 100%;
	}
	.showMenu .leftBar{
		left: -200px;
		
	}
	.leftBar {
		left: 0;
		transition: all .5s;
	}
</style>

<div class="right-container">
	<header class="top_header clearfix">
				<div class="nav_btn fl"></div>
				<div class="out fr clearfix">
					<p class="fl">欢迎使用 万八千后台管理系统</p>
					<a href="" class="fl">退出登陆</a>
				</div>
	</header>
	<div class="backstage">
		<ul class="clearfix a_index_ul">
			<li class="a_index_1">
				<p>今日申请用户数</p>
				<h3>5000人</h3>
			</li>
			<li class="a_index_1">
				<p>机器审核通过</p>
				<h3>52200人</h3>
			</li>
			<li class="a_index_1">
				<p>驳回</p>
				<h3><span>6555</span></h3>
			</li>
			<li class="a_index_1">
				<p>审核材料通过</p>
				<h3><span>100</span></h3>
			</li>
			<li class="a_index_1 a_index_last">
				<p>驳回</p>
				<h3><span>20%</span></h3>
			</li>
		</ul>
		<ul class="clearfix a_index_ul_2 a_index_ul_3">
			<li class="a_index_2">
				<p>今日放款量:<span>5000</span>元</p>
			</li>
			<li class="a_index_2">
				<p>历史放款总量:<span>50000000</span>元</p>
			</li>
			<li class="a_index_2">
				<p>历史还款总量:<span>50000</span></p>
			</li>
		</ul>
		<ul class="clearfix a_index_ul_2 a_index_ul_3">
			<li class="a_index_2">
				<p>今日还款量:<span>5000</span>元</p>
			</li>
			<li class="a_index_2">
				<p>代还款总余额:<span>50000000</span>元</p>
			</li>
			<li class="a_index_2">
				<p>逾期未还总额:<span>50000000</span>元</p>
			</li>
		</ul>
		<p class="a_index_4">借款来源渠道</p>
		<p class="a_index_5"><span>网站:50人</span><span>安卓:50人</span><span>微信:50人</span><span>IOS:50人</span></p>
		<div class="a_index_6">
			<ul class="clearfix">
				<li class="fl" style="width:40%;">
					<p class="a_index_7">男女比例</p>
					<p class="a_index_8">
						<span><img src="img/a_index_12.png" alt=""/></span>
						<span>新访客 <br/><span>55.32%</span></span>
					</p>
					<p class="a_index_8">
						<span><img src="img/a_index_12.png" alt=""/></span>
						<span>新访客 <br/><span>55.32%</span></span>
					</p>
				</li>
				<li class="fl" style="width:60%;">
					<p class="a_index_7">城市分布</p>
					<div class="barSpread fl">
						<div class="fl">
							<ul class="barArea">
								<li><span class="span1"></span>50-100家地区</li>
								<li><span class="span2"></span>100-200家地区</li>
								<li><span class="span3"></span>200-500家地区</li>
								<li><span class="span4"></span>1000家以上地区</li>
							</ul>
							<div class="barnum">
								<h3>酒吧数量排行</h3>
								<p>第一名  上海</p>
								<p>第二名  杭州</p>
								<p>第三名  赣州</p>
							</div>
						</div>
						<div class="barmap">
							<h3>酒吧分布</h3>
							<img src="img/a_index_12.jpg" width="60%">
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>

	<!-- <div class="footer clearfix">
		<span class="fl">Copyright Company © 2016</span>
		<span class="fr">技术支持热线：1234567890   &nbsp&nbsp&nbsp  &nbsp QQ：123456789</span>
	</div> -->
</div>
	<nav class="leftBar">
			<div class="per_manage">
				<img src="img/my1@2x.png">
				<p>管理员，你好!</p>
			</div>
			<ul class="nav_ul">
				<li class="actived">
					<a href="javascript:;" class="per_cent">个人中心</a>
					<ul class="sun_ul">
						<li class="active">个人信息</li>
						<li class="active">修改密码</li>
						<li class="active">操作记录</li>
					</ul>
				</li>
				<li class="actived">
				<a href="javascript:;" class="per_cent set">系统配置</a>
				    <ul class="sun_ul">
						<li class="active">基础配置</li>
						<li class="active">借款利率配置</li>
						<li class="active">审核拒绝理由</li>
						<li class="active">电话审核题库</li>
						<li class="active">审核策略版本</li>
						<li class="active">审核权限配置</li>
					</ul>
				</li>
				<li class="actived">
				<a href="javascript:;" class="per_cent wechat">微信配置</a>
					<ul class="sun_ul">
						<li class="active">公众号列表</li>
					</ul>
					</li>
				<li class="actived">
				<a href="javascript:;" class="per_cent user">用户管理</a>
					<ul class="sun_ul">
						<li class="active">用户审核</li>
						<li class="active">用户列表</li>
						<li class="active">用户检索</li>
						<li class="active">用户档案</li>
						<li class="active">微信模版消息列表</li>
						<li class="active">关注/取关列表</li>
						<li class="active">起诉黑名单列表</li>
						<li class="active">推广用户审核</li>
						<li class="active">推广用户列表</li>
					</ul>
				</li>
				<li class="actived">
				<a href="javascript:;" class="per_cent borrow">借款管理</a>
                    <ul class="sun_ul">
						<li class="active">借款列表</li>
						<li class="active">分期列表</li>
						<li class="active">催款备忘录</li>
						<li class="active">自动代付列表</li>
						<li class="active">人工代付列表</li>
						<li class="active">还款记录</li>
					</ul>   
				</li>
				<li class="actived">
				<a href="javascript:;" class="per_cent expand">推广管理</a>
                    <ul class="sun_ul">
						<li class="active">提现列表</li>
						<li class="active">自动代付列表</li>
						<li class="active">人工代付列表</li>
					</ul>   
				</li>
				<li class="actived">
				<a href="javascript:;" class="per_cent log">日志管理</a>
				    <ul class="sun_ul">
						<li class="active">短信发送记录</li>
						<li class="active">微信发送记录</li>
						<li class="active">冻结/解冻记录</li>
						<li class="active">电话审核记录</li>
						<li class="active">借款用户审核记录</li>
					</ul> 
				</li>
				<li class="actived">
				    <a hhref="javascript:;" class="per_cent data_mg">数据中心</a>
				    <ul class="sun_ul">
						<li class="active">今日数据</li>
						<li class="active">历史数据</li>
						<li class="active">黑名单库</li>
					</ul> 
				</li>
			</ul>
	</nav>
<script src="js/Chart.js"></script>
<script>
//	显示左边的菜单
$('.nav_btn').bind('click touchend',function(event){
	event.preventDefault();
	var $body = $('body');

	if($body.hasClass('showMenu')) {
		$body.removeClass('showMenu');
	}else {
		$body.addClass('showMenu');
	}
})

//下拉
$(function(){
	$(".per_cent").click(function(){
		$(this).parent("li").toggleClass("show_arrow")
		$(this).next(".sun_ul").slideToggle();
	})
	$(".sun_ul>li").click(function(){
		$(this).toggleClass("show_arrow").siblings().removeClass("show_arrow")
		$(this).find(".sub_menu").slideToggle().parents().siblings().find(".sub_menu").slideUp();
	})
})

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
		var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]

		}

window.onload = function(){
		var ctx = document.getElementById("canvas").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
}

</script>
</body>
</html>